<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>语音合成</title>
	<link rel="stylesheet" type="text/css" href="css/ai-style.css">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="js/layer/layer.js"></script>
</head>
<body>
	<header></header>
	<div class="main">
		<div class="left">
			<ul>
				<li class="active"><img src="images/yuyinhc_active.svg"><a href="yuyinhc.html">语音合成</a></li>
				<li><img src="images/yuyinsb.svg"><a href="yuyinsb.html">语音识别</a></li>
				<li><img src="images/wenzi.svg"><a href="wenzi.html">文字识别</a></li>
				<li><img src="images/renlian.svg"><a href="renlian.html">人脸识别</a></li>
				<li><img src="images/tuxiang.svg"><a href="tuxiang.html">图像识别</a></li>
			</ul>
		</div>
		<div class="right">
			<p>了解语音合成</p>
			<p>可以将输入的文字合成音频，提供多种声音效果</p>
			<div class="yuyin-box">
				<div class="text-box">
					<textarea placeholder="请输入文字进行语音合成"></textarea>
					<p>还可输入200字</p>
				</div>
				<div class="opt-box">
					<div class="box1">
						<dl class="active">
							<dt><img src="images/face.jpg"></dt>
							<dd>男生</dd>
						</dl>
						<dl>
							<dt><img src="images/face.jpg"></dt>
							<dd>女生</dd>
						</dl>
						<dl>
							<dt><img src="images/face.jpg"></dt>
							<dd>度逍遥</dd>
						</dl>
						<dl>
							<dt><img src="images/face.jpg"></dt>
							<dd>度丫丫</dd>
						</dl>
					</div>
					<div class="box2"><span></span></div>
					<div class="box3" onselectstart="return false">
						<div class="top1">
							<span class="active">1X</span>
							<span>2X</span>
							<span>3X</span>
						</div>
						<div class="top2">
							<img src="images/voice.svg">
							<span class="voice-line"><span class="voice-circle"></span><span class="voice-line2"></span></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<audio id="yuyin-bofang"></audio>
	</div>
</body>
</html>
<script type="text/javascript">
	var spd = 5;
	var per = 1;
	var vol = 5;
	var perArr = [1,0,3,4];
	var spdArr = [5,7,9];
	// 发音人选择
	$('.opt-box .box1 dl').click(function(){
		per = perArr[$(this).index()];
		$('.opt-box .box1 dl').removeClass('active');
		$(this).addClass('active');
	});
	// 语速
	$('.opt-box .box3 .top1 span').click(function(){
		spd = spdArr[$(this).index()];
		$('.opt-box .box3 .top1 span').removeClass('active');
		$(this).addClass('active');
	});
	// 音量设置
	var voiceCirCle = $('.voice-circle').get(0);
	var voiceLine = $('.voice-line').get(0);
	var voiceLine1 = $('.voice-line2').get(0);
	voiceCirCle.onmousedown=function(e){
        var evt =e||event;
        var x =evt.offsetX;
        var y =evt.offsetY;

        window.onmousemove=function(e){
            var evt =e||event;
            voiceCirCle.style.left=evt.clientX-voiceLine.offsetLeft-x+"px";
            if(evt.clientX-voiceLine.offsetLeft-x<=0){
                voiceCirCle.style.left="0px";
            }
            if(evt.clientX-voiceLine.offsetLeft-x>=105){
                voiceCirCle.style.left="105px";
            }
            voiceLine1.style.width=voiceCirCle.offsetLeft+15+"px";
            
        }
        document.onmouseup=function(){
            window.onmousemove=null;
            var tmp = voiceCirCle.style.left.replace('px','');
            vol = Math.ceil(parseFloat(tmp)*15/105);
        }
    }
	// 远程请求
	$('.opt-box .box2').click(function(){ 
		var mytext = $('.text-box textarea').val();
		if(mytext.trim()==''){
			layer.alert('请输入文字进行语音合成',{title:'温馨提示',icon:2});
			return;
		}
		var index = layer.load(0, {shade: 0.7});
		$.ajax({
	    	url:"http://101.37.159.34:8000/getspeech",    //请求的url地址
		    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
		    data:{
				"mytext": mytext.trim(),
				"spd":spd, // 语速，取值0-9，默认为5中语速
				"per":per, // 发音人选择, 0为女声，1为男声，3为情感合成-度逍遥，4为情感合成-度丫丫，默认为普通女
				"pit":"5", // 音调，取值0-9，默认为5中语调
				"vol":vol // 音量，取值0-15，默认为5中音量
			},    //参数值
		    type:"GET",   //请求方式
		    beforeSend:function(){
		        //请求前的处理
		    },
		    success:function(res){
				layer.close(index);
		        //请求成功时处理
				$('#yuyin-bofang').attr('src',res);
				var audio = document.getElementById('yuyin-bofang');
            	audio.play();
		    },
		    complete:function(){
		        //请求完成的处理
		    },
		    error:function(){
				layer.close(index);
		        //请求出错处理
		    }
		});
	});
	function trim(x) {
	  return x.replace(/^\s+|\s+$/gm,'');
	}
</script>